<html id="html">
    <head>
        <!-- version :2.1 -->

        <title>扫雷2.1</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="qframe/qframe.css">
        <style type="text/css">
            html{
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
                width: max-content;
            }
            .help{
                text-decoration:underline;
                color:blue;
                white-space:nowrap;
                width: min-content;
            }
            #ctrl{
                padding: 1vw 1.5vw 1vw 1.5vw;
                color: white;
                width:min-content;
                border-color: #5f5f5f;
                border-width:0.5vw 1vw 1vw 0.5vw;
                
            }
            #ctrl.a{
                background-color: #7e7e7e;
                border-style: outset;
            }
            #ctrl.b{
                background-color: #575757;
                border-style: inset;
            }
            td{
                height:1.5vw;
                width:2vw;
                padding: 0;
                background-color: burlywood;
                text-align: center;
            }
            /* 未知的雷 */
            td.n{
               background-color: silver; 
            }
            /* 打开的雷 */
            td.o{
                background-color: wheat;
            }
            /* 确定的雷 */
            td.w{
                background-color: coral;
            }
            /* AI根据的数字 */
            td.l{
                background-color:gold;
            }
            /* AI查杀 */
            td.i{
                background-color: rgb(199, 62, 12);
            }

            /* 概率查杀AI，将可能性显示颜色平均分10% */
            td.a{background-color: rgb(199, 62, 200);}
            td.b{background-color:   rgb(199, 62, 180);}
            td.c{background-color:  rgb(199, 62, 160);}
            td.d{background-color:  rgb(199, 62, 140);}
            td.e{background-color:  rgb(199, 62, 120);}
            td.f{background-color:  rgb(199, 62, 100);}
            td.g{background-color:  rgb(199, 62, 80);}
            td.h{background-color:  rgb(199, 62, 60);}
            td.j{background-color:  rgb(199, 62, 40);}
            td.m{background-color:  rgb(199, 62, 20);}
            #game{
                float: left;
            }
            #set{
                float:left;
                background-color: bisque;
            }
            #set div{
                clear: both;
            }
            input{
                margin: 3px;
            }
            .ses{
                font-size: larger;
            }
            h4{
                line-height: 8px;
            }
        </style>
    </head>
    <body id="body" onkeydown="if(event.keyCode == 17 && !iscontrol){buttonctrl()}"
            onkeyup="if(event.keyCode == 17 && iscontrol){buttonctrl()}">
        <h3 class="help"onclick="update()">扫雷</h3>
        <div id="game">
            <table id="main">
            
            </table>
            <div id="tools_ctrl">
                <div class="help" onclick="ctrl_help()">ctrl帮助</div>
                <div id="ctrl" class="a" onclick="if(event.ctrlkey){return;}buttonctrl()">ctrl</div>
            </div>
        </div>
        <div id="set">
            <div id="sets" style="margin-left: 5px;">
                <h4>控制器</h4>
                <label for="wid">行数</label><input type="text" id="wid"><br>
                <label for="hei">列数</label><input type="text" id="hei"><br>
                <label for="x">雷数</label><input type="text" id="x" ><br>
                <input type="submit" class="ses" onclick="starter()" value="重玩"><br>
                <div class="help" onclick="AI_help()">提示用法说明</div>
                <input type="submit" class="ses" onclick="AI()" value="确定性提示">
                非确定提示<input type="checkbox" class="ses" onclick="if(israi){israi=false;StopAI()}else israi=true;">
            </div>
            
        </div>
    </body>
    <script src="qframe/qframe.js"></script>
    <script>//注：每个方格的坐标不是从零开始，因为要算上外围！
        var disp_eff = function(){//内联函数，彳亍
                let dis_tim = 0;
                return function(){
                    if(dis_tim ==6) {
                        dis_tim =0;
                        if(iscontrol) buttonctrl();
                        return;
                    }
                    dis_tim++;
                    buttonctrl();
                    setTimeout("disp_eff()",400);
                }
        }();
        function update(){//更新日志
            qframe.start([
                "2.1更新日志",
                "1，新增更新日志",
                "2，更改默认参数",
                "3，更改一些外观",
                "4，加入更多帮助",
                "5，第一次打开不再可能踩雷"

            ].join("\n"),"确定","检查更新");
            qframe.no = function(){
                game = 0;
                qframe.hide();
                document.writeln("<html><head>"+
                    "<meta charset=\"utf-8\">"+
                    "<link rel=\"stylesheet\" href=\"qframe/qframe.css\"></head><body>"+
                    "<script src=\"http://xsyangtuo.gitee.io/test/test/testing/update.js\"><\/script>"+
                    "<script src=\"qframe/qframe.js\"><\/script></body></html>");
                setTimeout(function(){
                    if(sweep == undefined) {
                        qframe.start("未能获取更新信息","返回","前往原网页");
                    }else if(sweep == 2.1){
                        qframe.start("已是最新版本","返回","前往原网页");
                    }else{
                        qframe.start("最新版本:"+sweep,"返回","前往原网页查看");
                    }
                    qframe.yes = function(){
                        location.reload();
                    }
                    qframe.no = function(){
                        location.href = "https://xsyangtuo.gitee.io/test/test/testing/sweepv2.html";
                    }
                },500);
            }
        }
        function ctrl_help(){
            qframe.start("在电脑端按下ctrl之后单击雷可以对其进行标记，下方方块将显示ctrl状态<br>手机端可以直接点击下方方块开启或关闭","确定","查看效果");
                qframe.yes = function(){
                    disp_eff();
                }
                qframe.no = function(){
                    disp_eff();
                }
        }
        function AI_help(){
            qframe.start("确定性提示：黄色为根据的数字，深色为确定的地雷<br>非确定提示：启用后，颜色越紫，是雷的概率越大","确定","取消");
                qframe.yes = function(){
                    
                }
        }
        var iscontrol = false;//按下ctrl
        var the = document.getElementById("main");
        var game = 1;//0为结束状态，1为准备状态，2为启动状态
        var width = 16;
        var height = 30;
        var swen = 40;
        var leftt = (width-1)*(height-1)-swen;
        var god = [];var ail=[];var israi=false;
        document.getElementById("wid").value=width-1;
        document.getElementById("hei").value=height-1;
        document.getElementById("x").value=swen;
        function starter(){//每次游戏的调用入口
            console.log(2);
            game = 0;
            width = parseInt(document.getElementById("wid").value)+1;
            height = parseInt(document.getElementById("hei").value)+1;
            swen = parseInt(document.getElementById("x").value);
            leftt = (width-1)*(height-1)-swen;
            if(leftt<=0){
                qframe.start("你的雷多到爆炸！","那我再换一下","取消");
                qframe.yes = function(){
                    
                }
                return;
            }
            god = [];ail=[];
            let txt = "<tr>";
            for(let n = 0;n<width+1;n++){//数组载入
                god[n] = new Array(height+1);
                god[n].fill(0);
                ail[n] = new Array(height+1);
                ail[n].fill(-1);
                
            }
            ail[0].fill(0);ail[width].fill(0);//对+2进行舍弃
            for(let n = 0;n<swen;n++){//塞雷
                god[Math.round(1+Math.random()*(width-2))][Math.round(1+Math.random()*(height-2))] = 1;
            }
            console.log(ail);
            for(let n = 0;n<height;n++){//上方的外围
                txt+="<td>"+n+"</td>";
            }
            for(let nw = 1;nw<width;nw++){//开始插入..
                txt+="<tr><td>"+nw+"</td>";
                ail[nw][0] = 0;ail[nw][height] = 0;
                for(let nh = 1;nh<height;nh++){
                    
                    txt+=
                    "<td id=\""+nw+"and"+nh+"\" class=\"n k\" "+
                    "onclick=\"if(event.ctrlKey || iscontrol){ ctrl("+nw+","+nh+");return;}setting("+nw+","+nh+")\"></td>";
                }
                txt+="</tr>"
            }
            the.innerHTML = txt;
            game = 1;
        }
        function showAll(){//显示所有雷
            for(let na=0;na<height;na++){
                for(let nb=0;nb<width;nb++){
                    console.log(god[na][nb]);
                    if(god[na][nb]==1) {
                        let doc = document.getElementById(na+"and"+nb)
                        doc.className = "w";
                        doc.innerText="!";
                    }
                }
            }
        }
        function setting(w,h){//打开
            if(game ==0) return;
            if(game == 1){//进入开始状态,若开始即踩雷，则自动换雷
                if(god[w][h] == 1){
                    god[w][h] =0;
                    while(true){
                        let widr = Math.round(1+Math.random()*(width-2));
                        let heir = Math.round(1+Math.random()*(height-2));
                        if(god[widr][heir] != 1){
                            god[widr][heir] =1;
                            break;
                        }
                    }
                }
                game =2;
            }
            let tq = document.getElementById(w+"and"+h);
            if(w<1 || w>width-1 || h<1 || h>height-1 ||tq.className.charAt(0) =="o" ||tq.className.charAt(0) =="w"){
                return 0;
            }
            if(god[w][h] == 1){
                game=0;
                qframe.start("你失败啦！下次走运","再来","取消");
                qframe.yes = function(){
                    starter();
                }
                showAll();
                return;
                
            }
            tq.className = "o k";
            ail[w][h] = 0;
            if(--leftt<=0){
                game=0;
                console.log("yes!");
                qframe.start("你胜利了！","再来","取消");
                qframe.yes = function(){
                    starter();
                }
                showAll();
                return;
            }
            let nu = 
            god[w-1][h-1]+
            god[w-1][h]+
            god[w-1][h+1]+
            god[w][h-1]+
            god[w][h+1]+
            god[w+1][h-1]+
            god[w+1][h]+
            god[w+1][h+1];//周围雷
            if(nu != 0){//有雷显示
                document.getElementById(w+"and"+h).innerHTML = nu;
                ail[w][h]=nu;
            }
        }
        function deler(){//循环
            if(game ==0) return;
            for(let nw = 1;nw<width;nw++){//这里进行空白扩大
                for(let nh = 1;nh<height;nh++){
                    let doc = document.getElementById(nw+"and"+nh);
                    if(doc.className.charAt(0) == "o" && doc.innerHTML == ""){
                        setting(nw-1,nh-1);
                        setting(nw-1,nh);
                        setting(nw-1,nh+1);
                        setting(nw,nh-1);
                        setting(nw,nh+1);
                        setting(nw+1,nh-1);
                        setting(nw+1,nh);
                        setting(nw+1,nh+1);
                        }
                    }
                }
                
        }
        function ctrl(w,h){
            let doc =document.getElementById(w+"and"+h);
            if(doc.className.charAt(0) == "n"){
                doc.className="w k";
                doc.innerHTML = "!";
                if(god[w][h] ==1) ail[w][h] = -2;
                return;
            }
            if(doc.className.charAt(0) == "w"){
                doc.className="n k"
                doc.innerHTML = "";
                ail[w][h] =-1;
                return;
            }
        }
        function buttonctrl(){//标记切换
            if(iscontrol){
                iscontrol = false;
                document.getElementById("ctrl").className="a";
                return;
            }
            iscontrol = true;
            document.getElementById("ctrl").className="b";
        }
        //从这里开始是AI部分
        function StopAI(){
            for(let na=1;na<width;na++){
                for(let nb=1;nb<height;nb++){
                    let doc = document.getElementById(na+"and"+nb);
                    doc.className = doc.className.substr(0,2)+"k";
                }
            }
        }
        function AI(){console.log(1);
            for(let na=1;na<width;na++){
                for(let nb=1;nb<height;nb++){
                    
                    if(ail[na][nb]>0){
                        let su = 0;
                        for(let i=-1;i<2;i++){
                            for(let ii=-1;ii<2;ii++){
                                if(ail[na+i][nb+ii] <0) su++;
                            }
                        }
                        console.log(na+" "+nb+" "+su)
                        if(su==ail[na][nb]){
                            let doc=document.getElementById(na+"and"+nb);
                            doc.className = doc.className.substr(0,2)+"l";
                            for(let i=-1;i<2;i++){
                                for(let ii=-1;ii<2;ii++){
                                    if(ail[na+i][nb+ii] ==-1){
                                        let docs=document.getElementById((na+i)+"and"+(nb+ii));
                                        docs.className=docs.className.substr(0,2)+"i";
                                    }
                                }
                            }
                        }
                    }
                }
            }
            setTimeout("StopAI()",5000);
        }
        function RAI(){
            if(!israi) 
                return;
            
            let rail = [];let rails = [];
            for(let n = 0;n<width+1;n++){//数组载入
                rail[n] = new Array(height+1);
                rail[n].fill(0);
                rails[n] = new Array(height+1);
                rails[n].fill(0);
            }
            for(let na=1;na<width-1;na++){
                for(let nb=1;nb<height-1;nb++){
                    if(ail[na][nb]>0){
                        let tot = ail[na][nb];
                        let su=0;
                        for(let i=-1;i<2;i++){//计算概率
                            for(let ii=-1;ii<2;ii++){
                                if(ail[na+i][nb+ii] ==-2) tot--;
                                if(ail[na+i][nb+ii] ==-1) su++;
                            }
                        }
                        for(let i=-1;i<2;i++){//写入概率
                            for(let ii=-1;ii<2;ii++){
                                //console.log(su/tot);
                                if(ail[na+i][nb+ii] ==-1) {
                                    rail[na+i][nb+ii]+=(tot/su);
                                    rails[na+i][nb+ii]+=1;
                                    //console.log(rail[na+i][nb+ii]+"_"+rails[na+i][nb+ii]+"_"+(su/tot))
                                }

                            }
                        }
                        
                    }
                }
            }
            let rst = "mjhgfedcba";
            for(let na=1;na<width;na++){//效果显示
                for(let nb=1;nb<height;nb++){
                    if((rails[na][nb]!=0)&&(ail[na][nb] ==-1)){
                        let doc = document.getElementById(na+"and"+nb);
                        let rb = parseInt(rail[na][nb]/rails[na][nb]/0.1);
                        console.log(rb);
                        if(rb>=10)doc.className = doc.className.substr(0,2)+rst[9];
                        else doc.className = doc.className.substr(0,2)+rst[rb];
                    }
                }
            }
        }
        setInterval("RAI()",100)










        starter();
        setInterval("deler()",10)
            // setTimeout("location.reload()",1000)
    </script>
</html>